import React from "react";
import { Button, Space, Table } from "@douyinfe/semi-ui";
import { columns, DataType } from "./dataAndType";
import useTable from "./useTable";
import { sendRequest } from "@/utils/promiseConcurrency";

const DouyinTable: React.FC = () => {
  const data = useTable<DataType[]>("/api_student/douyin/table/query");

  /**
   * 更新列表
   */
  const updateTable = (record: DataType) => {
    const { key, name } = record;
    console.log({ key, name });
  };

  const getColumns = columns.concat([
    {
      title: "操作",
      dataIndex: "operation",
      render: (_, record) => (
        <Space>
          <Button type="danger">删除</Button>
          <Button onClick={() => updateTable(record)}>更新</Button>
        </Space>
      )
    }
  ]);

  const handleTest = () => {
    sendRequest(["http1", "http2", "http3", "http4", "http5", "http6", "http7"], 2, res => {
      console.log("执行回调函数", res);
    });
  };

  return (
    <>
      <h3>DouyinTable</h3>
      <hr />
      <Space vertical spacing={20} align="start" style={{ width: "100%" }}>
        <Table bordered columns={getColumns} dataSource={data} />
        <Button onClick={handleTest}>测试并发</Button>
      </Space>
    </>
  );
};
export default DouyinTable;
